<template>
  <el-form label-width="100px">
    <!--SPU 名称-->
    <el-form-item label="SPU 名称">
      <span>{{spuName}}</span>
    </el-form-item>
    <!--SKU 名称-->
    <el-form-item label="SKU 名称">
      <el-input type="text" placeholder="请输入SKU名称" v-model="skuInfo.skuName"></el-input>
    </el-form-item>
    <!--价格(元)-->
    <el-form-item label="价格(元)">
      <el-input type="number" placeholder="请输入价格" v-model="skuInfo.price"></el-input>
    </el-form-item>
    <!--重量(千克)-->
    <el-form-item label="重量(千克)">
      <el-input type="number" placeholder="请输入重量" v-model="skuInfo.weight"></el-input>
    </el-form-item>
    <!--规格描述-->
    <el-form-item label="规格描述">
      <el-input type="textarea" placeholder="请输入规格描述" rows="4" v-model="skuInfo.skuDesc"></el-input>
    </el-form-item>
    <!--平台属性-->
    <el-form-item label="平台属性">
      <el-form inline label-width="100px">
        <el-form-item :label="attr.attrName" style="margin-bottom:10px" v-for="attr in attrList" :key="attr.id">
          <el-select palceholder="请选择" v-model="attr.attrValId">
            <el-option :label="val.valueName" :value="attr.id+'_'+val.id" v-for="val in attr.attrValueList"
              :key="val.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <!--销售属性-->
    <el-form-item label="销售属性">
      <el-form inline label-width="100px">
        <el-form-item :label="sale.saleAttrName" v-for="sale in saleAttrList" :key="sale.id">
          <el-select palceholder="请选择" v-model="sale.valId">
            <el-option :label="val.saleAttrValueName" v-for="val in sale.spuSaleAttrValueList" :key="val.id"
              :value="val.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <!--图片列表-->
    <el-form-item label="图片列表">
      <el-table :data="imageList" style="width: 100%" @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="{row}">
            <img :src="row.imgUrl" :alt="row.imgName" style="height:100px;" />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="success" v-if="row.isDefault === '1'">默认</el-button>
            <el-button type="primary" v-else @click="setDefault(row)">设为默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <!--两个按钮-->
    <el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="back">取消</el-button>
    </el-form-item>

  </el-form>
</template>
<script>
  export default {
    name: 'SkuForm',
    data() {
      return {
        skuInfo: {
          skuName: '', // sku的名称
          price: '', // 价格
          weight: '', // 重量
          skuDesc: '', // 描述信息
          skuAttrValueList: [], // 平台属性数组数据
          skuSaleAttrValueList: [], // 销售属性数组
          skuImageList: [], // 图片列表数组
          createTime: '', // 当前的skuInfo对象添加(创建)的时间
          isSale: 0, // 是否上架的标识(添加了sku之后,该sku是否会在前台的页面中直接显示)
          skuDefaultImg: 'string', // 设置为默认的图片的地址(前台电商项目中/search路由对应的界面中,商品列表中显示的默认的图片)
          spuId: 0, // skuInfo对象最终向哪个spuInfo对象中的添加啊? 需要spuId
          tmId: 0, // 当前的sku也是属于某个spuInfo对象的,那么也需要对应的品牌
          category3Id: 0, // 三级分类的id
        },
        spuName: '', // spu对象的名字
        category1Id: '', // 一级分类的id
        category2Id: '', // 二级分类的id
        attrList: [], // 平台属性数组
        saleAttrList: [], // 销售属性数组
        imageList: [], // 图片列表数组
        selectedImageList: []
      }
    },
    methods: {
      back() {
        this.$emit('cancel');
        this.resetData();
      },

      // 初始化数据
      initAddData(spuInfo) {
        this.spuName = spuInfo.spuName; //保存spu对象的名字
        this.skuInfo.spuId = spuInfo.id; // 添加的spu对象的id
        this.skuInfo.tmId = spuInfo.tmId; // 品牌id
        this.category1Id = spuInfo.category1Id; // 一级分类id
        this.category2Id = spuInfo.category2Id; // 二级分类id
        this.skuInfo.category3Id = spuInfo.category3Id; // 三级分类id
        this.getInitData(); // 获取数据
      },
      // 初始化数据的方法(平台属性,销售属性,图片列表)
      async getInitData() {
        const {
          category1Id,
          category2Id,
          skuInfo: {
            category3Id,
            spuId
          }
        } = this;
        const promise1 = await this.$API.attr.getAttrInfoList(category1Id, category2Id, category3Id); // 平台属性
        const promise2 = await this.$API.sku.getSpuSaleAttrList(spuId); // 销售属性
        const promise3 = await this.$API.sku.getSpuImageList(spuId); // 图片
        const result = await Promise.all([promise1, promise2, promise3]);
        this.attrList = result[0].data;
        this.saleAttrList = result[1].data;
        this.imageList = result[2].data;
        // 添加响应式属性,用于默认按钮的显示与隐藏
        this.imageList.forEach(item => {
          this.$set(item, 'isDefault', '0');
        });
        // 设置第一个图片为默认图片
        this.imageList[0].isDefault = '1';
        this.skuInfo.skuDefaultImg = this.imageList[0].imgUrl;
      },
      //设置默认图片
      setDefault(img) {
        // 遍历数组
        this.imageList.forEach(item => {
          item.isDefault = '0';
        });
        img.isDefault = '1';
        this.skuInfo.skuDefaultImg = img.imgUrl;
      },
      // 多选图片的表格所需要的事件的回调函数
      handleSelectionChange(val) {
        this.selectedImageList = val;
      },
      //保存
      async save() {
        const {
          skuInfo,
          selectedImageList,
          attrList,
          saleAttrList
        } = this;
        // 平台属性
        skuInfo.skuAttrValueList = attrList.reduce((pre, item) => {
          const attrIdValId = item.attrIdValId;
          if (attrIdValId) {
            const [attrId, valueId] = attrIdValId.split('_');
            pre.push({
              attrId,
              valueId
            })
          }
          item.attrIdValId = '';
          return pre;
        }, []);

        // 销售属性
        skuInfo.skuSaleAttrValueList = saleAttrList.reduce((pre, item) => {
          const valueId = item.valueId;
          if (valueId) {
            pre.push({
              saleAttrValueId: valueId
            });
          }
          item.valueId = '';
          return pre;
        }, []);

        // 图片列表
        skuInfo.skuImageList = selectedImageList.map(item => ({
          imgName: item.imgName,
          imgUrl: item.imgUrl,
          isDefault: item.isDefault,
          spuImgId: item.id
        }));

        try {
          await this.$API.sku.addOrUpdateSkuInfo(skuInfo);
          this.$message.success('操作成功');
          this.$emit('cancel');
          this.$emit('saveSuccess');
          this.resetData();
        } catch (error) {
          this.$message.error(error.mssage || '操作失败');
        }
      },

      //重置数据
      resetData() {
        this.skuInfo = {
          skuName: '', // sku的名称
          price: '', // 价格
          weight: '', // 重量
          skuDesc: '', // 描述信息
          skuAttrValueList: [], // 平台属性数组数据
          skuSaleAttrValueList: [], // 销售属性数组
          skuImageList: [], // 图片列表数组
          isSale: 0, // 是否上架的标识(添加了sku之后,该sku是否会在前台的页面中直接显示)
          skuDefaultImg: '', // 设置为默认的图片的地址(前台电商项目中/search路由对应的界面中,商品列表中显示的默认的图片)
          spuId: 0, // skuInfo对象最终向哪个spuInfo对象中的添加啊? 需要spuId
          tmId: 0, // 当前的sku也是属于某个spuInfo对象的,那么也需要对应的品牌
          category3Id: 0 // 三级分类的id
        }
        this.spuName = '' // spu对象的名字
        this.category1Id = '' // 一级分类的id
        this.category2Id = '' // 二级分类的id
        this.attrList = [] // 平台属性数组
        this.saleAttrList = [] // 销售属性数组
        this.imageList = [] // 图片列表数组
        this.selectedImageList = [] // 用来存储选中的图片
      }
    }
  }

</script>
<style>
</style>
